<!---->
<template>
    <div class="page_selecthouse">
        <common-header :title="'选择户'" :showBack="true"></common-header>
        <div class="search_block">
            <input class="common-input input-search" v-model="message" placeholder="请输入姓名或者身份证号"/>
            <div class="translateBlock" style="width: 1.2rem;text-align: center;font-size: 0.45rem;color: #fff;"
                 @click="searchInfo()">搜索
            </div>
        </div>
        <div class="pages-main" style="height: calc( 100vh - 93px)">
            <div style="height: 83%;overflow-y: auto;">
                <section class="search-result every-block-bgcolor every-block-padding">
                    <span class="enumeration"></span>
                    <span>搜索结果如下</span>
                </section>
                <div v-if="searchList.length">
                    <section class="search-result every-block-padding"
                             v-for="(item,index) in searchList"
                             :class="item.isCheck ? 'btn-check' : 'every-block-bgcolor'"
                             @click="checkItem(item,index)" :style="{width:item.isCheck ? '94%':'94%' }">
                        <div>
                            <div class="translateBlock">姓名:{{item.name}}</div>
                            <div class="translateBlock" style="float:right;">{{item.idcardnumber}}</div>
                        </div>
                        <div>
                            地址：{{item.address}}
                        </div>
                        <div>
                            家庭成员：{{item.familymember}}
                        </div>
                    </section>
                </div>
                <div v-else style="text-align: center;margin-top: 1.7rem;">
                    <img src="../../../static/images/nodata.png" width="200"/>
                </div>
            </div>
            <div class="btn-next-block-fix" @click="goNext()">
                <button class="btn-next weui-btn" :class="!isCheckBtn ? 'btn-primary' : 'btn-check' ">下一步</button>
            </div>
            <!--<div :class="isLowAgent === 0 ? 'btn-next-block-fix':'btn-next-block'" @click="goNext()">-->
                <!--<button class="btn-next weui-btn" :class="!isCheckBtn ? 'btn-primary' : 'btn-check' ">下一步</button>-->
            <!--</div>-->
        </div>
    </div>
</template>

<script>
    import resident from '../../services/resident'
    import Vue from 'vue'

    export default {
        name: "selecthouse",
        components: {},
        data() {
            return {
                message: '',
                searchList: [],    // 数据
                isCheckBtn: false,
                checkItemInfo: null,
                isLowAgent: Number(window.sessionStorage.getItem('userAgent'))
            }
        },

        created() {

        },
        watch: {},
        methods: {
            // 搜索
            searchInfo() {
                let _param = this.$tools.invokeUAF('resident/getPopulationByUniqueIndex', {
                    message: this.message,
                    ismaster: 1,
                })
                resident.getPopulationByUniqueIndex(_param).then(res => {
                    let data = res.data.data;
                    this.searchList = data;
                    this.searchList.forEach((item, index) => {
                        Vue.set(item, 'isCheck', false)
                    })
                })
            },

            // 选择户信息
            checkItem(item, index) {
                this.isCheckBtn = true;
                this.checkItemInfo = item;
                this.searchList.forEach((i, j) => {
                    i.isCheck = index === j ? true : false;
                })
            },

            // 点击下一步按钮
            goNext() {
                if (!this.checkItemInfo) {
                    this.$vux.toast.show({
                        text: '请选择户',
                        position: 'middle',
                        type: 'text'
                    })
                    return;
                }
                this.$tools.goPage_query('addmember', {familyid: this.checkItemInfo.familyid})
            },
        },
    };
</script>

<style lang="less" rel="stylesheet/less" type="text/less">
    .page_selecthouse {
        .search_block {
            width: 100%;
            background-color: #6c84e5;
            padding: 0px 0.4rem 0.2rem 0.4rem;
            margin-top: -0.5rem;

            .input-search {
                width: 7.2rem;
            }
        }

        .search-result {
            line-height: 1rem;
            margin-bottom: 10px;
        }

        .btn-next-block {
            position: absolute;
            bottom: 1rem;

            .btn-primary {
                background-color: #a8a9ad;
            }
        }

        .btn-next-block-fix {
            position: fixed;
            top: 16rem;
            width: 90%;
            margin: 0 5%;

            .btn-primary {
                width: 100%;
                background-color: #a8a9ad;
            }
        }
    }
</style>
